<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>XPEL 质保后台管理登录</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="/dist/font-awesome.css">
    <link rel="stylesheet" href="/dist/bootstrap.css">
    <link rel="stylesheet" href="/dist/toastr.min.css">
    <style>
        body{
            background-color: #364150;
            background-color: #f5f5f5;
            font-size: 13px;
            color: #333;
        }
        .login{
            background-color: #364150;
            background-color: #f5f5f5;
            min-height: 100vh;
            width: 100vw;
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
        }
        .wrapper{
            background-color: #eceef1;
            background-color: #ffffff;
            width: 600px;
            max-width: 100%;
            padding: 50px 100px;
            -webkit-border-radius: 7px;
            -moz-border-radius: 7px;
            border-radius: 7px;
            position: relative;
        }
        .form-title{
            color: #4db3a5;
            color: #333333;
            text-align: center;
            font-size: 28px;
            font-weight: 400;
            margin-bottom: 25px;
        }
        .forget-password{
            font-size: 14px;
            float: right;
            display: inline-block;
            margin-top: 10px;
        }
        a{
            color: #5b9bd1;
        }
        a:hover {
            color: #3175af;
        }
        .login .wrapper .form-control{
            /*background-color: #dde3ec;*/
            height: 43px;
            color: #8290a3;
            color: #4a4a4a;
            /*height: 22px;
            line-height: 22px;*/
            padding: 13px 16px 13px 14px;
            display: block;
        }
        .login .wrapper .form-control:focus, .login .wrapper .form-control:active{
            border: 1px solid #c3ccda;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        }
        .btn-success:active:hover, .btn-success.active:hover{
            background-color: #37918b;
        }
        .btn-success:active, .btn-success.active{
            background-image: none;
            background-color: #348a84;
        }
        .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active{
            color: #fff;
            background-color: #3b9c96;
            border-color: #307f7a;
        }
        .btn-success{
            color: #fff;
            background-color: #45B6AF;
            border-color: #3ea49d;
            font-weight: 600;
            padding-left: 20px;
            padding-right: 20px;
        }
        .btn-default{
            font-weight: 600;
            padding-left: 25px;
            padding-right: 25px;
            color: #6c7a8d;
            background-color: #ffffff;
            border: none;
        }
        .btnadpt{
            background-color: #ff6700;
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: block;
            margin-bottom: 14px;
            margin-top: 30px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            padding: 0;
        }

        .form-item {
            margin-bottom: 15px;
            clear: both;
            display: flex;
            flex-wrap: nowrap;
            box-sizing: border-box
        }

        .form-item .form-label {
            width: 100px;
            flex: 0 0 100px;
            padding: 9px 15px;
            line-height: 20px;
            text-align: right;
            box-sizing: border-box;
            position: relative
        }

        .form-item .form-label[required]:before {
            content: "*";
            color: red;
            padding-right: 5px
        }

        .form-item .form-input {
            flex: 1
        }

        .error_info{
            position: relative;
            padding: 0.5rem 0.75rem;
            margin-bottom: 1rem;
            border: 1px solid #f5c6cb;
            border-radius: 0.25rem;
            color: #721c24;
            background-color: #f8d7da;
            font-size: 0.85rem;
            display: none;
        }
        .error_info.active{
            display: block;
        }
    </style>
</head>
<body>
<div class="login">
    <div class="wrapper">
        <div action="" method="post" class="login-form">
            @csrf
            <h3 class="form-title">XPEL 质保后台管理登录</h3><div class="form-group">
                <input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="请输入用户名" name="username">

                <div class="error_info" id="did1"></div>
            </div>
            <div class="form-group">
                <input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="请输入密码" name="password">
                <div class="error_info" id="did2"></div>

                <input type="hidden" value="" name="type">
            </div>
            <div class="form-actions text-center">
                <button type="button" class="btn btn-warning uppercase btnadpt" onclick="handleLogin()">登录</button>
                {{--<a href="javascript:;" id="forget-password" class="forget-password">Forgot Password?</a>--}}
            </div>
        </div>

            {{--<h3 class="form-title">Sign In</h3>
        <form class="forget-form" action="/admin/forget_password" method="post" novalidate="novalidate" style="display: none;">
            <h3 class="form-title">Forget Password ?</h3>
            <p>
                Enter your e-mail address below to reset your password.
            </p>
            <div class="form-group">
                <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email" name="email">
            </div>
            <div class="form-actions">
                <button type="button" id="back-btn" class="btn btn-default">Back</button>
                <button type="submit" class="btn btn-success uppercase pull-right">Submit</button>
            </div>
        </form>--}}
    </div>

    <div class="modal fade" id="smsCheck">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">手机号码验证</h4>
                </div>

                <div class="modal-body">
                    <div class="form">
                        <div class="form-item form-s1">
                            <div class="form-label" required="">手机号</div>
                            <div class="form-input">
                                <div class=" input-group custom-control-inline">
                                    <div class="input-group-prepend">
                                        <select name="extension" class="form-control">
                                            @foreach(\App\Models\PhoneExtension::get(['id', 'phone_ext']) as $v)
                                                <option value="{{ $v->phone_ext }}">{{ $v->phone_ext }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <input type="text" name="phone_number" value="" class="form-control" placeholder="请输入手机号">
                                </div>
                            </div>
                        </div>
                        <div class="error_info" id="did3"></div>
                        <div class="form-item form-s1">
                            <div class="form-label" required="">验证码</div>
                            <div class="form-input">
                                <div class=" input-group custom-control-inline">
                                    <input type="text" name="sms_code" value="" class="form-control" placeholder="请输入验证码">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-primary sms-btn" onclick="getSmsCode()">获取验证码</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="error_info" id="did4"></div>
                    </div>
                    <div class="text-center mt-5">
                        <button class="btn btn-primary" onclick="checkSmsCode()">登录</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script src="/dist/jquery.js"></script>
<script src="/dist/axios.js"></script>
<script src="/dist/js.cookie.min.js"></script>
<script src="/dist/bootstrap.bundle.js"></script>
<script src="/dist/toastr.min.js"></script>
<script>

    function showErrorInfo(id, msg) {
        id = String(id).trim();
        if (!id) {
            return false;
        }
        if (id.indexOf('#') !== 0) {
            id = '#' + id;
        }
        $(id).text(msg).addClass('active');
    }
    function hideErrorInfo(id) {
        id = String(id).trim();
        if (!id) {
            return false;
        }
        if (id.indexOf('#') !== 0) {
            id = '#' + id;
        }
        $(id).removeClass('active');
    }
    $('#forget-password').click(function () {
        $('.login-form').hide();
        $('.forget-form').show();
    });

    $('#back-btn').click(function () {
        $('.login-form').show();
        $('.forget-form').hide();
    });
    function checkSmsCode() {
        var extension = $('#smsCheck [name="extension"]').val();
        var phone_number = $('#smsCheck [name="phone_number"]').val();
        var sms_code = $('#smsCheck [name="sms_code"]').val();
        if (!phone_number) {
            // toastr.error('手机号码不能为空！');
            showErrorInfo('did3', '手机号码不能为空！');
            $('#smsCheck [name="phone_number"]').focus();
            return false;
        }
        if (!sms_code) {
            // toastr.error('验证码不能为空！');
            showErrorInfo('did4', '验证码不能为空！');
            $('#smsCheck [name="sms_code"]').focus();
            return false;
        }
        var form = {
            extension: extension,
            phone_number: phone_number,
            sms_code: sms_code,
            t: 'ajax',
            a: 'checkSmsCode',
        };
        axios.post('/admin/login', form)
            .then(function (d) {
                toastr.success('登录成功！')
                window.location.reload();
            })
            .catch(function (error) {
                var msg = error.response.data.msg || '验证码错误';
                showErrorInfo('did4', msg);
                // toastr.error(msg)
            })
    }

    function chageSmsBtnText(second) {
        if (second > 0) {
            second = second -1;
            setTimeout(function () {
                $('.sms-btn').text(second);
                chageSmsBtnText(second)
            }, 1000);
        } else {
            $('.sms-btn').text('获取验证码');
            $('.sms-btn').attr('disabled', false);
        }
    }

    function getSmsCode() {
        var extension = $('#smsCheck [name="extension"]').val();
        var phone_number = $('#smsCheck [name="phone_number"]').val();
        $('.sms-btn').attr('disabled', true);
        if (!phone_number) {
            // toastr.error('手机号码不能为空！');
            showErrorInfo('did3', '手机号码不能为空！');
            $('#smsCheck [name="phone_number"]').focus();
            setTimeout(function () {
                $('.sms-btn').attr('disabled', false);
            }, 300);
            return false;
        }
        var form = {
            extension: extension,
            phone_number: phone_number,
            t: 'ajax',
            a: 'getSmsCode',
        };
        axios.post('/admin/login', form)
            .then(function (d) {
                toastr.success('发送成功，请注意查收！')
                chageSmsBtnText(60)
            })
            .catch(function (error) {
                var msg = error.response.data.msg || '手机号码不正确';
                showErrorInfo('did3', msg);
                setTimeout(function () {
                    $('.sms-btn').attr('disabled', false);
                }, 300);
                // toastr.error(msg)
            })

    }
    function handleLogin() {
        var username = $('.login-form input[name="username"]').val();
        var password = $('.login-form input[name="password"]').val();
        if (!username) {
            // toastr.error('用户名不能为空');
            showErrorInfo('did1', '用户名不能为空');
            $('.login-form input[name="username"]').focus();
            return false;
        }
        if (!password) {
            // toastr.error('密码不能为空');
            showErrorInfo('did2', '密码不能为空');
            $('.login-form input[name="password"]').focus();
            return false;
        }
        var form = {
            username: username,
            password: password,
            t: 'ajax',
        };
        axios.post('/admin/login', form)
            .then(function (d) {
                var data = d.data.data;
                if (data && data.type == 1) {
                    window.location.reload();
                    return true;
                }
                $('#smsCheck [name="phone_number"]').val('')
                // attr('placeholder', msg);
                $('#smsCheck [name="sms_code"]').val('');
                if (data && data.phone_number) {
                    var msg = '请输入手机尾号为【'+data.phone_number+'】的手机号码';
                    showErrorInfo('did3', msg);
                }
                $('#smsCheck').modal({backdrop: 'static', keyboard: false})
                // 0403
            })
            .catch(function (error) {
                var msg = error.response.data.msg || '用户名或密码错误';
                showErrorInfo('did2', msg);
                // toastr.error(msg)
            })
    }
    @if(session('trash'))
    $(function () {
        toastr.{{ session('trash.type') ?: 'success' }}('{{ session('trash.content') ?: session('trash') }}', null, []);
    });
    @endif

    $(document).ready(function () {
        $('.login-form [name="username"]').on('change', function () {
            hideErrorInfo('did1', '！');
        })
        $('.login-form [name="password"]').on('change', function () {
            hideErrorInfo('did2', '！');
        })
        $('#smsCheck [name="phone_number"]').on('change', function () {
            hideErrorInfo('did3', '');
        })
        $('#smsCheck [name="sms_code"]').on('change', function () {
            hideErrorInfo('did4', '');
        })
    })
</script>
</body>
</html>